<template>
  <div style="height: 100%;">
    <div class="sysheader">
      <div class="logo">
        人脸识别系统
      </div>
      <ul class="timeul">
        <li>
          <i class="fa fa-calendar"></i> <span>{{sysdate}}</span>
        </li>
        <li>
          <i class="el-icon-time"></i> <span>{{systime}}</span>
        </li>
      </ul>
    </div>
    <div class="sysleft">
      <div class="parea pt15">
        <div class="verify_item">
          <div class="title">
            <p class="chn">采相区域</p>
            <p class="eng">Photography area</p>
          </div>
          <div class="item_face">
            <img :src="personimg ? personimg : nobodypng"/>
          </div>
          <div class="item_time">
            <div class="time_block">
              <span class="shot_date">2018/4/17</span><span class="shot_time">13:47:29</span>
            </div>
          </div>
        </div>
      </div>
      <div class="cresult pt15">
        <div class="verify_item">
          <div class="title">
            <p class="chn">比对结果</p>
            <p class="eng">Comparing results</p>
          </div>
          <div class="pos_a">
            <div class="color_title">
              <img :src="redtitle"/>
              <div class="text">
                该目标已加入黑名单！
              </div>
            </div>
          </div>
          <div class="main_c">
            <img :src="redmain" class="colorbg"/>
            <img :src="matchimg" class="matchimg">
            <div class="l_desc red_desc">
              <div class="desc_item">
                <div class="item_con onlyname">
                  <div class="title2">
                    姓名
                  </div>
                  <div class="name">
                    张某某
                  </div>
                </div>
              </div>
              <!--<div class="desc_item">
                <div class="item_con">
                  <div class="title2">
                    姓名
                  </div>
                  <div class="proname">
                    张某某
                  </div>
                  <div class="propng">
                    张某某
                  </div>
                </div>
              </div>
              <div class="desc_item">
                <div class="item_con onlyname">
                  <div class="title2">
                    年龄
                  </div>
                  <div class="name">
                    50
                  </div>
                </div>
              </div>-->
            </div>
            <div class="r_desc red_desc">
              <!--<div class="desc_item">
                <div class="item_con">
                  <div class="title2">
                    姓名
                  </div>
                  <div class="proname">
                    张某某
                  </div>
                  <div class="propng">
                    张某某
                  </div>
                </div>
              </div>
              <div class="desc_item">
                <div class="item_con">
                  <div class="title2">
                    姓名
                  </div>
                  <div class="proname">
                    张某某
                  </div>
                  <div class="propng">
                    张某某
                  </div>
                </div>
              </div>
              <div class="desc_item">
                <div class="item_con">
                  <div class="title2">
                    姓名
                  </div>
                  <div class="proname">
                    张某某
                  </div>
                  <div class="propng">
                    张某某
                  </div>
                </div>
              </div>-->
            </div>
           </div>
        </div>
      </div>
    </div>
    <div class="sysright">
      <div class="mrecord pt15">
        <div class="verify_item">
          <div class="title">
            <p class="chn">比对记录</p>
            <p class="eng">Match record</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        sysdate: '',
        systime: '',
        interval: null,
        nobodypng: require('@/assets/img/nobody.png'),
        personimg: '',
        matchimg: require('@/assets/img/test1.jpg'),
        redtitle: require('@/assets/img/redtitle.png'),
        redmain: require('@/assets/img/redmain.png')
      }
    },

    methods: {
      handleInterval() {
        clearInterval(this.interval)
        this.interval = setInterval(() => {
          this.setTime()
        }, 1000)
      },
      setTime() {
        let time = new Date()
        this.sysdate = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate()
        this.systime = time.getHours() + ':' + time.getMinutes()
      }
    },
    mounted() {
      this.handleInterval()
    }
  }
</script>
